{extend name="default/layout" /}

{block name="css"}
<link href="/static/default/css/goods/detail.css?v={$static_version}" rel="stylesheet">
{/block}

{block name="content"}
<!-- 商品详情页插件头部hook -->
{cms:hooks name="goods.detail.before" /}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
    data-goods-id="{$goods.id}" 
    data-goods-name="{$goods.name|default=''}" 
    data-goods-price="{$goods.price|default=0}" 
    data-goods-has-paid="{$goods.has_paid|default=0}"
    data-goods-paid-content-type="{$goods.paid_content_type|default=''}">
    <!-- 面包屑导航 -->
        {cms:hooks name="goods.detail.breadcrumb.before" /}
    {include file="default/goods/detail/components/breadcrumb" /}
    {cms:hooks name="goods.detail.breadcrumb.after" /}

    <!-- 内容顶部广告位 -->
    {cms:hooks name="content.top" /}

    <!-- 商品主要信息区域 -->
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-8 mb-8">
        <!-- 商品图片和信息 -->
        <div class="lg:w-3/4 order-1 lg:order-1 bg-white">
            <div class="bg-white rounded-sm p-6 pb-0">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
                    <!-- 商品图片 -->
                    <div class="lg:col-span-1">
                        {include file="default/goods/detail/components/gallery" /}
                    </div>
                    <!-- 商品信息 -->
                    <div class="lg:col-span-2">
                        {include file="default/goods/detail/components/info" /}
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品规格 -->
        <div class="lg:w-1/4 order-2 lg:order-2">
            {include file="default/goods/detail/components/spec" /}
        </div>
    </div>

    <!-- 商品详情内容 - 左右布局 -->
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- 左侧：商品详情内容 -->
        <div class="flex-1 lg:w-3/4">
            <div class="bg-white rounded-sm">
                <!-- 标签页导航 -->
                <div class="border-b border-gray-200 px-3 md:px-6 flex items-center justify-between bg-gradient-to-b from-white to-gray-50">
                    <div class="tab-nav-container w-full">
                        <nav class="-mb-px flex tab-nav-wrapper">
                            <button class="tab-button active py-3 px-2 md:px-4 border-b-2 border-blue-500 font-medium text-xs md:text-sm text-gray-800"
                                onclick="showTab('content')">
                                <i class="fas fa-file-alt"></i>
                                <span class="hidden sm:inline-block ml-2">商品简介</span>
                        </button>
                        {if in_array($goods.paid_content_type, ['multi_chapter', 'chapter_groups', 'multi_file'])}
                            <button class="tab-button py-3 px-2 md:px-4 border-b-2  ransparent font-medium text-xs md:text-sm text-gray-500 hover:text-gray-800"
                                onclick="showTab('chapters')">
                                <i class="fas fa-list"></i>
                                <span class="hidden sm:inline-block ml-2">章节目录</span>
                        </button>
                        {/if}
                            <button class="tab-button py-3 px-2 md:px-4 border-b-2  ransparent font-medium text-xs md:text-sm text-gray-500 hover:text-gray-800"
                                onclick="showTab('reviews')">
                                <i class="fas fa-comments"></i>
                                <span class="hidden sm:inline-block ml-2">用户评价</span>
                        </button>
                            <button class="tab-button py-3 px-2 md:px-4 border-b-2  ransparent font-medium text-xs md:text-sm text-gray-500 hover:text-gray-800"
                                onclick="showTab('help')">
                                <i class="fas fa-question-circle"></i>
                                <span class="hidden sm:inline-block ml-2">帮助中心</span>
                        </button>
                    </nav>
                    </div>

                    <!-- 右侧预留区域 -->
                    <div class="hidden md:flex items-center space-x-3 text-sm text-gray-500">
                        <!-- 这里可以放置其他内容，比如浏览量、更新时间等 -->
                        <span class="hidden md:inline-flex items-center">
                           <!-- 预留位置 -->
                        </span>
                    </div>
                </div>

                <!-- 商品内容 -->
                {include file="default/goods/detail/components/content" /}

                <!-- 章节目录 -->
                {include file="default/goods/detail/components/chapters" /}

                <!-- 评价内容 -->
                {include file="default/goods/detail/components/comments" /}

                <!-- 帮助中心 -->
                {include file="default/goods/detail/components/help" /}
            </div>
        </div>



        <!-- 右侧：相关商品推荐 -->
        {include file="default/goods/detail/components/related" /}
   
    </div>

    <!-- 内容底部广告位 -->
    {cms:hooks name="content.bottom" /}
</div>

{/block}

{block name="js"}
<!-- 引入外部JS文件 -->
<script src="/static/default/js/goods/detail.js?v={$static_version}"></script>

<!-- GLightbox 图片查看器 -->
<link rel="stylesheet" href="/static/css/glightbox.min.css">
<script src="/static/js/glightbox.min.js"></script>

{/block}
